<template>
  <div class="yx-bg">
    <div id="top-panel" style="height: 10rem;">
      <div style="float: left;">
        <img style="width: 4rem; margin-top: 2rem; margin-left: 2rem;" src="/static/img/home.png" @click="returnHome">
        <div style="margin-left: 2rem; color: #FE7F7E;">返回首页</div>
      </div>
      <img id="meihua" style="width: 60%; float: right; margin-right: -15%;" src="/static/img/meihua.png">
    </div>

    <div style="width: 100%; text-align: center; font-size: 3.5rem; font-weight: bold; color: red; margin-top: -3.5rem;">排行榜</div>

    <div style="width: 90%; margin: 2rem auto; background-color: #ffffff; border-radius: 1rem; padding: 2rem 1rem; font-size: 2rem; height: 70%; overflow-y: scroll;">
      <div style="display: flex; width: 100%; align-items: center;">
        <div style="width: 30%; text-align: center; font-weight: bold;">
          头像
        </div>
        <div style="width: 40%; text-align: center; font-weight: bold;">
          昵称
        </div>
        <div style="width: 30%; text-align: center; font-weight: bold;">
          答题数量
        </div>
      </div>
      <div v-for="user in userList" style="display: flex; width: 100%; align-items: center; margin-top: 2rem;">
        <div style="width: 30%; text-align: center;">
          <img :src="user.head_img_url" style="width: 5rem; border-radius: 50%;">
        </div>
        <div style="width: 40%;">
          {{user.nick_name.substr(0,14)}}
        </div>
        <div style="width: 30%; text-align: center; font-weight: bold; color: red;">
          {{user.answer_correct_num}}
        </div>
      </div>
    </div>
    

  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
export default {
  data () {
    return {
      // score: 0,
      // shareShow: false
      userList: {}
    }
  },
  mounted: function() {
    // this.score = this.$cookie.get('score')
    this.refreshRanking()
    
    TweenLite.from("#denglong", 1, {
      y: "-400",
      opacity: 0,
    })

    TweenLite.from("#meihua", 1, {
      x: "+400",
      opacity: 0,
    })

    // this.getSignPackage()
  },
  methods: {
    // getSignPackage: function() {
    //   let currentUrl = window.location.href
    //   let urlArr = currentUrl.split("#")
    //   let url = encodeURIComponent(urlArr[0])
    //   // alert(currentUrl)
    //   // alert(url)
    //   this.$axios.get(`getAccess.php?url=${url}`)
    //         .then(res => {
    //           // console.log(res)
    //           this.setWxConfig(res.data)
    //         })
    //         .catch(error => {
    //           console.log(error)
    //         })
    // },
    // setWxConfig: function(data) {
    //   let score = this.$cookie.get('score')
    //   let hideShareTemp = this.hideShare
    //   // let resTitle = this.resTitle
    //   // let resPercent = this.resPercent
    //   wx.config({
    //       debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    //       appId: data.appId, // 必填，公众号的唯一标识
    //       timestamp: data.timestamp, // 必填，生成签名的时间戳
    //       nonceStr: data.nonceStr, // 必填，生成签名的随机串
    //       signature: data.signature,// 必填，签名
    //       jsApiList: [
    //         'onMenuShareTimeline'
    //       ] // 必填，需要使用的JS接口列表
    //   });
    //   wx.ready(function() {
    //     // console.log('接口配置信息已经完成')
    //     wx.onMenuShareTimeline({
    //       title: `我在“雀神挑战赛”中获得了“${resTitle}”称号，击败了${resPercent}的选手，看看你能打败多少人？`,
    //       link: 'http://www.66nmgame.com/answer.html',
    //       imgUrl: 'http://www.66nmgame.com/static/img/share.png',
    //       success: function() {
    //         console.log('用户点击按钮回调')
    //         hideShareTemp()
    //       }
    //     })
    //   })
    // },

    // shareGame: function() {
    //   this.shareShow = true
    // },

    // hideShare: function() {
    //   this.shareShow = false
    // }

    refreshRanking: function() {
      let that = this
      this.$axios.get('/refreshRanking.php')
      .then(res => {
        console.log(res.data)
        that.userList = res.data
      })
    },

    returnHome: function() {
      this.$router.push({path: 'cover'})
    }



  }
}
</script>
